<template>
  <div>
    <p>
      <mt-swipe :auto="0" >
        <!--<mt-swipe-item v-for="item in items" :key="item.id">-->
        <mt-swipe-item >
          <div>
            <img src="./photos/1.jpg" class="img" @click="getSitement1"/>
            <img src="./photos/2.jpg" class="img" @click="getSitement2"/>
            <img src="./photos/3.jpg" class="img" @click="getSitement3"/>
            <img src="./photos/4.jpg" class="img" @click="getSitement4"/>
          </div>
          <div>
            <img src="./photos/5.jpg" class="img" @click="getSitement5"/>
            <img src="./photos/6.jpg" class="img" @click="getSitement6"/>
            <img src="./photos/7.jpg" class="img" @click="getSitement7"/>
          </div>
          <div>
            <img src="./photos/8.jpg" class="img" @click="getSitement8"/>
            <img src="./photos/9.jpg" class="img" @click="getSitement9"/>
          </div>
          <div>
            <img src="./photos/10.jpg" class="img" @click="getSitement10"/>
          </div>
        </mt-swipe-item>

        <mt-swipe-item >
          <div>
            <img src="./photos/11.jpg" class="img" @click="getSitement11"/>
            <img src="./photos/12.jpg" class="img" @click="getSitement12"/>
            <img src="./photos/13.jpg" class="img" @click="getSitement13"/>
            <img src="./photos/14.jpg" class="img" @click="getSitement14"/>
          </div>
          <div>
            <img src="./photos/15.jpg" class="img" @click="getSitement15"/>
            <img src="./photos/16.jpg" class="img" @click="getSitement16"/>
            <img src="./photos/17.jpg" class="img" @click="getSitement17"/>
          </div>
          <div>
            <img src="./photos/18.jpg" class="img" @click="getSitement18"/>
            <img src="./photos/19.jpg" class="img" @click="getSitement19"/>
          </div>
          <div>
            <img src="./photos/20.jpg" class="img" @click="getSitement20"/>
          </div>
        </mt-swipe-item>

        <mt-swipe-item >
          <div>
            <img src="./photos/21.jpg" class="img" @click="getSitement21"/>
            <img src="./photos/22.jpg" class="img" @click="getSitement22"/>
            <img src="./photos/23.jpg" class="img" @click="getSitement23"/>
            <img src="./photos/24.jpg" class="img" @click="getSitement24"/>
          </div>
          <div>
            <img src="./photos/25.jpg" class="img" @click="getSitement25"/>
            <img src="./photos/26.jpg" class="img" @click="getSitement26"/>
            <img src="./photos/27.jpg" class="img" @click="getSitement27"/>
          </div>
          <div>
            <img src="./photos/28.jpg" class="img" @click="getSitement28"/>
            <img src="./photos/29.jpg" class="img" @click="getSitement29"/>
          </div>
          <div>
            <img src="./photos/30.jpg" class="img" @click="getSitement30"/>
          </div>
        </mt-swipe-item>

      </mt-swipe>
    </p>
    <div align="left">
      <div>签到教室：   {{this.classroom}}</div>
      <div>签到课程：   {{this.class}}</div>
      <div>上课教师：   {{this.teacher}}</div>
      <div>当前日期：   {{this.date}}</div>
    </div>
    <div>
      <mt-button size="large" type="default" @click="siginInfo">签到</mt-button>
      <div>小主签到的是<h3>{{this.dev_num}}</h3>号座位</div>
    </div>
  </div>
</template>
<script>
  import { Button } from 'mint-ui';
  import {Swipe, SwipeItem} from 'mint-ui';
  import 'mint-ui/lib/style.css';
  import axios from 'axios';
  import { MessageBox } from 'mint-ui';

  export default {
    components: {
      'mt-swipe': Swipe,
      'mt-swipe-item': SwipeItem,
      MtButton:Button
    },
    data () {
      return {
        class:'',
        teacher:'',
        classroom:'',
        date:'',
        number:'',
        dev_num:'',
        datetime:'',
        week:'Sat'
      }
    },
    methods:{
      geyDateTime(){
        var date = new Date();
        this.date = date.getFullYear() + "年" + Number(date.getMonth()+1) + '月' + date.getDate() + '日' ;
        axios.post('/api/schedule')
          .then(this.getcheduleSucc)
          .catch(err => {
            console.log(err);
          });
      },
      getcheduleSucc(res){
        console.log(res.data[0]);
        this.teacher = res.data[0].teacher;
        this.classroom = res.data[0].addr;
        this.class = res.data[0].courses;
      },
      siginInfo: function() {
        if(this.dev_num === ''){
          console.log("erro");
          MessageBox({
            title: '警告',
            message: '请选择座位',
            showCancelButton: true
          });
        }
        else{
          axios.post('http://47.106.193.107:8080/sign_in',{"number":this.$store.state.userName ,"dev_num":this.dev_num , "week":this.week, "time": "一二节"}
          )
            .then(this.getSiginInfoSucc)
            .catch(err => {
              MessageBox({
                title: '警告',
                message: '签到失败',
                showCancelButton: true
              });
              console.log(err);
            });
        }
      },
      getSiginInfoSucc:function (res) {
        console.log(res);
        if(res.data.msg === 'failed'){
          MessageBox({
            title: '警告',
            message: '签到失败',
            showCancelButton: true
          });
          this.dev_num = ''
        }
        if(res.data.msg === 'success'){
          MessageBox({
            title: '成功',
            message: '签到成功',
            showCancelButton: true
          });
          this.dev_num = ''
        }
      },
      add(){
        this.$store.commit('increatment',10);
      },
      x(){
        return this.$store.state.userName;
      },
      getSitement1:function () {
        this.dev_num = '01'
      },
      getSitement2:function () {
        this.dev_num = '02'
      },
      getSitement3:function () {
      this.dev_num = '03'
    },
      getSitement4:function () {
        this.dev_num = '04'
      },
      getSitement5:function () {
        this.dev_num = '05'
      },
      getSitement6:function () {
        this.dev_num = '06'
      },
      getSitement7:function () {
        this.dev_num = '07'
      },
      getSitement8:function () {
        this.dev_num = '08'
      },
      getSitement9:function () {
        this.dev_num = '09'
      },
      getSitement10:function () {
        this.dev_num = '10'
      },
      getSitement11:function () {
        this.dev_num = '11'
      },
      getSitement12:function () {
        this.dev_num = '12'
      },
      getSitement13:function () {
        this.dev_num = '13'
      },
      getSitement14:function () {
        this.dev_num = '14'
      },
      getSitement15:function () {
        this.dev_num = '15'
      },
      getSitement16:function () {
        this.dev_num = '16'
      },
      getSitement17:function () {
        this.dev_num = '17'
      },
      getSitement18:function () {
        this.dev_num = '18'
      },
      getSitement19:function () {
        this.dev_num = '19'
      },
      getSitement20:function () {
        this.dev_num = '20'
      },
      getSitement21:function () {
        this.dev_num = '21'
      },
      getSitement22:function () {
        this.dev_num = '22'
      },
      getSitement23:function () {
        this.dev_num = '23'
      },
      getSitement24:function () {
        this.dev_num = '24'
      },
      getSitement25:function () {
        this.dev_num = '25'
      },
      getSitement26:function () {
        this.dev_num = '26'
      },
      getSitement27:function () {
        this.dev_num = '27'
      },
      getSitement28:function () {
        this.dev_num = '28'
      },
      getSitement29:function () {
        this.dev_num = '29'
      },
      getSitement30:function () {
        this.dev_num = '30'
      }
    },

    mounted () {
      this.geyDateTime();
    }
  }
</script>
<style scoped>
  img {
    width: 20%;
  }
  .mint-swipe {
    height: 218px;
  }
  .desc {
    font-weight: 600;
    opacity: .9;
    padding: 5px;
    height: 20px;
    line-height: 20px;
    width: 100%;
    color: #fff;
    background-color: gray;
    position: absolute;
    bottom: 0;
  }
</style>
